<template>
	<view class="contentBox">
		<view class="">
			<view class="cateList">
				问题的种类(可选，默认其它)：
			</view>
			<!-- 选项卡 -->
			<view class="cateList problem">
				<view :class="[currentId==item.id?'listhover':'']" :data-current="item.id" class="list"
					v-for="(item,index) in proList" :key="item.id" @click="selectId1">
					{{item.name}}
				</view>
			</view>
			<!-- 问题框 -->
			<view class="textBox">
				<textarea maxlength="-1" placeholder="请描述一下您要反馈的问题..." @input="inputDetail"></textarea>
			</view>
			<!-- 添加图片区域 -->
			<view class="cateList">
				添加图片(非必选，最多四张)：
			</view>
			<view class="imgContainer">
				<view class="imgButton" @click="chooseImg">
					<text class="iconfont icon-paizhaoshangchuan"></text>
				</view>
				<view class='imageInfo' v-for="(value,index) in imgItem" :key="index">
					<image :src="value" :data-index="index" mode="aspectFill" @click="imgPreview(index,imgItem)">
						<!-- <icon type='cancel' ></icon> -->
						<u-icon name="close-circle" class="delete-btn" @click="deletePic(index)"
							:data-pic_index='index'></u-icon>
					</image>
				</view>
			</view>
			<!-- 提交 -->
			<button class="upButton" @click="upData">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				textArea: '',
				openId: '',
				currentId: 4,
				//后台返回的id
				feedbackId: '',
				imgItem: [],
				proList: [{
						id: 1,
						name: '功能建议'
					},
					{
						id: 2,
						name: '服务问题'
					},
					{
						id: 3,
						name: '性能问题'
					},
					{
						id: 4,
						name: '其它'
					}
				]
			}
		},
		methods: {
			//文本域的内容
			inputDetail(e) {
				this.textArea = e.detail.value;
				console.log(this.textArea);
			},
			// 提交逆袭
			upData() {
				let that = this;
				that.openId = uni.getStorageSync('openId');
				//检测是否输入文本
				if (this.textArea == '') {
					uni.showToast({
						title: '请先输入反馈文本！',
						duration: 1000,
						icon: 'none'
					});
					return;
				}
				uni.showModal({
					title: '提示',
					content: '确定要提交反馈吗?',
					success: function(res) {
						//如果用户点击确定
						if (res.confirm) {
							console.log('用户点击确定');
							uni.request({
								url: 'https://zioncloud.top/repair/feedback/submit',
								name: 'text',
								data: {
									record: that.currentId,
									openId: that.openId,
									text: that.textArea,
									imgList: that.imgItem,
								},
								method: "POST",
								header: {
									"Content-Type": "application/json"
								},
								success(res) {
									console.log(res);
									console.log("只是提交了文本");
									that.feedbackId=res.data.data.feedbackId;
									//上传图片
										let num = 0;
										that.imgItem.forEach(async function(value, index) {
											await uni.uploadFile({
												url: 'https://zioncloud.top/repair/feedback/fileUpload',
												filePath: value,
												name: 'img',
												formData: {
													feedbackId: that.feedbackId,
													openId: that.openId,
													path: value
												},
												success(res) {
													// console.log(res);
													// console.log('前方数据');
													num = num + 1;
													if (num == that.imgItem.length) {
														uni.showToast({
															title: '成功提交！',
															icon: 'success',
															duration: 1000
														})
													}
													uni.navigateBack({
														delta:1
													})
												},
												fail(err){
													console.log(err);
												}
											});
										});
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//选中
			selectId1(e) {
				console.log('点击了！');
				this.currentId = e.currentTarget.dataset.current;
				console.log(this.currentId);
			},
			//选择图片
			chooseImg() {
				let that = this;
				uni.chooseImage({
					count: 5, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: function(res) {
						that.imgItem = res.tempFilePaths;
						console.log(that.imgItem);
					}
				});
			},
			//预览图片
			imgPreview(index, imgItem) {
				uni.previewImage({
					current: index,
					urls: imgItem
				})
			},
			//删除图片
			deletePic(index) {
				var pic_index = index;
				var upload_pic = [];
				console.log('删除')
				for (let i in this.imgItem) {
					// 将没有被删除的图片放入新数组
					if (i != pic_index) {
						upload_pic.push(this.imgItem[i]);
					}
				}
				this.imgItem = upload_pic;
				console.log(this.imgItem);
			},
			//上传图片
			async upLoadImg(i) {
				let that = this;
				let {
					data: res
				} = await uni.uploadFile({
					url: 'https://zioncloud.top/repair/feedback/fileUpload', //仅为示例，非真实的接口地址
					filePath: that.imgItem[i],
					name: 'file',
					formData: {
						openId: that.openId,
						path: that.imgItem[i],
						feedbackId: that.feedbackId,
					},
					success: (uploadFileRes) => {
						console.log('上传图片成功？');
						console.log(uploadFileRes.data);
					}
				});
				console.log(res);
			}
		}
	}
</script>

<style>
	page {
		background-color: rgb(238, 238, 238);
	}

	.contentBox {
		height: 100%;
		width: 100%;
	}

	.cateList {
		margin-left: 30rpx;
		margin-top: 15rpx;
	}

	.problem {
		display: flex;
		flex-direction: row
	}

	.list {
		width: 21.3%;
		padding: 10rpx;
		text-align: center;
		background-color: #fff;
		margin: 20rpx 10rpx;
	}

	.listhover {
		border: solid red 1rpx;
	}

	.textBox {
		margin: 30rpx;
		margin-top: 10rpx;
		width: 90%;
		padding-right: 30rpx;
		background-color: #fff;
	}

	.textBox textarea {
		width: 100%;
		padding: 15rpx;
	}

	/* 图片预览 */

	/* xin */
	.imgContainer {
		width: 95%;
		padding: 10rpx;
		margin: 20rpx 30rpx 0 20rpx;
		border: 1px solid #ccc;
		border-radius: 25rpx;
		overflow: auto;
		background-color: #fff;
	}

	.imgContainer:hover {
		border: 1px solid gray;
	}

	.imgButton {
		float: left;
		width: 18%;
		height: 120rpx;
		margin: 2rpx 6rpx;
	}

	.imgButton text {
		/* padding: 20rpx; */
		width: 100%;
		height: 120rpx;
		text-align: center;
		line-height: 120rpx;
		font-size: 100rpx;
		font-weight: 600rpx;
	}

	.imageInfo {
		position: relative;
		border: 1rpx solid #ccc;
		border-radius: 2rpx;
		width: 18%;
		height: 120rpx;
		margin: 2rpx 6rpx;
		float: left;
		border-radius: 5rpx;
	}

	.imageInfo image {
		width: 100%;
		height: 100%;
	}

	.delete-btn {
		position: absolute;
		font-size: 40rpx;
		top: 0;
		right: 0;
		color: red;
	}

	/* 提交 */
	.upButton {
		width:200rpx;
		position: fixed;
		left: 50%;
		transform: translate(-50%, 0);
		bottom: 10%;
	}
</style>
